<template>
	<div class="system-role-container layout-padding standard-container">
		<div class="review-list-title">
			<div class="title-actions">
				<!-- <el-input v-model="state.search" clearable size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
				<el-button size="default" type="primary" class="ml10" @click="refresh">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="primary" class="ml10" @click="handleBatchDeleteRole">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					批量删除
				</el-button>
				<el-button size="default" type="primary" class="ml10" @click="onOpenAddRole('add')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增角色
				</el-button>
			</div>
		</div>
		<!-- <div class="table-container"> -->
		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" @selection-change="handleSelectionRole">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column> -->
			<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
          </template>
        </el-table-column> -->
			<!--      <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>-->
			<el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="createUsername" label="创建人" show-overflow-tooltip></el-table-column> -->
			<!-- <el-table-column prop="updateUsername" label="操作人" show-overflow-tooltip></el-table-column> -->
			<el-table-column label="操作">
				<template #default="scope">
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
						>修改
					</el-button>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除 </el-button>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onBtn(scope.row)">按钮权限 </el-button>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onPermission(scope.row)"
						>操作权限
					</el-button>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onMenu(scope.row)">菜单权限 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- </div> -->

		<div class="pagination-container">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>

		<RoleDialog ref="roleDialogRef" @refresh="refresh()" />
		<BtnDialog ref="btnDialogRef"></BtnDialog>
		<PermissionDialog ref="PermissionDialogRef"></PermissionDialog>
		<MenuDialog ref="menuDialogRef"></MenuDialog>
	</div>

	<!-- </div> -->
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { roleApi } from '/@/api/sys/role';
import msg from '/@/utils/messageUtils';
// 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));

const BtnDialog = defineAsyncComponent(() => import('/src/views/system/role/btn_dialog.vue'));
const PermissionDialog = defineAsyncComponent(() => import('/src/views/system/role/permission_dialog.vue'));

const MenuDialog = defineAsyncComponent(() => import('/@/views/system/role/menu_dialog.vue'));

// 定义变量内容
const roleDialogRef = ref();
const btnDialogRef = ref();
const PermissionDialogRef = ref();
const menuDialogRef = ref();
const state = reactive({
	search: '',
	choiceRoleIds: [],
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});
// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;
	const { data } = await roleApi().searchRole({
		roleName: state.search,
		offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
		limit: state.tableData.paging.pageSize,
	});
	state.tableData.data = data.datas;
	state.tableData.paging.currentPage = data.paging.currentPage;
	state.tableData.paging.totalCount = data.paging.totalCount;

	state.tableData.loading = false;
};

const handleBatchDeleteRole = () => {
	if (state.choiceRoleIds.length == 0) {
		msg().warn('请至少选择一个!');
		return;
	}

	ElMessageBox.confirm(`此操作将永久删除选中的角色，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await roleApi().batchDeleteRole({ roleIds: state.choiceRoleIds });
			getTableData();
			msg().success('操作成功');
		})
		.catch(() => {});
};

const handleSelectionRole = (choiceRoles: any) => {
	console.log('choice: ', JSON.stringify(choiceRoles));
	state.choiceRoleIds = [];
	choiceRoles.forEach((e) => state.choiceRoleIds.push(e.id));
};

// 打开新增角色弹窗
const onOpenAddRole = (type: string) => {
	roleDialogRef.value.openDialog(type);
};
// 打开修改角色弹窗
const onOpenEditRole = (type: string, row: Object) => {
	roleDialogRef.value.openDialog(type, row);
};

const onBtn = (row: RowRoleType) => {
	btnDialogRef.value.openDialog(row);
};

const onPermission = (row: RowRoleType) => {
	PermissionDialogRef.value.openDialog(row);
};

const onMenu = (row: RowRoleType) => {
	menuDialogRef.value.openDialog(row);
};

// 删除角色
const onRowDel = (row: RowRoleType) => {
	ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await roleApi().deleteRole(row.id);
			ElMessage.success('删除成功');
			getTableData();
		})
		.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const refresh = () => {
	state.tableData.paging.currentPage = 1;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-role-container {
	// .system-role-padding {
	padding: 15px;

	.el-table {
		flex: 1;
	}

	// }
}
</style>
